<template>
	<view class="uni-margin-wrap">
		<swiper class="swiper" circular :indicator-dots="indicatorDots" :indicator-active-color="indicatorActiveColor"
			:autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item v-for="(item,index) in advertList" :key="item.id">
				<view class="swiper-item">
					<image :src=item.imageUrl lazy-load="true"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="box">
			<video-list :list = "documentaryVideos" title = "纪录片"></video-list>
			<video-list :list = "performanceVideos" title = "日常表演"></video-list>
			<video-list :list = "trainingVideos" title = "训练"></video-list>
			<video-list :list = "tutorialVideos" title = "教学视频"></video-list>			
		</view>
	</view>
</template>

<script>
	import VideoList from '../../components/home/VideoList.vue'
	import {
		getAdvert,
		getVideoList
	} from '../../api/HomePage/index.js'
	export default {
		components: {
			VideoList
		},
		data() {
			return {
				indicatorDots: true,
				indicatorActiveColor: "#fff",
				autoplay: true,
				interval: 2000,
				duration: 500,
				position: 1,
				advertList: [],
				
				documentaryVideos: [], // 纪录片视频数组
				performanceVideos: [], // 日常表演视频数组
				trainingVideos: [], // 训练视频数组
				tutorialVideos: [] // 教学视频数组
				
			}
		},
		onLoad() {
			//开启刷新事件
			uni.startPullDownRefresh({
				success() {
					console.log('开始刷新成功')
				},
				fail(err) {
					console.log(err)
				},
			})

		},
		async onPullDownRefresh() {
			//请求数据
			try {
				await this.getAdvertFn()
				await this.getVideoList()
			} catch (err) {
				console.log(err)
				return
			}
			// 结束上刷新
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000)
		},
		methods: {
			async getAdvertFn() {
				await getAdvert(this.position).then(res => {
					this.advertList = res.data
				})
			},
			async getVideoList(){
				await getVideoList(0).then(res => {
					console.log(res)
					this.documentaryVideos = res.data
				}).catch(err=>{
					console.log(err)
				})
				await getVideoList(1).then(res => {
					console.log(res)
					this.performanceVideos = res.data
				}).catch(err=>{
					console.log(err)
				})
				await getVideoList(2).then(res => {
					this.trainingVideos = res.data
				}).catch(err=>{
					console.log(err)
				})
				await getVideoList(3).then(res => {
					this.tutorialVideos = res.data
				})
			}
		}
	}
</script>

<style scoped>
	.swiper {
		height: 215px;
		margin-bottom: 20rpx;
	}

	.swiper-item {
		width: inherit;
		height: inherit;
	}

	.swiper-item image {
		display: block;
		width: 90%;
		height: 100%;
		border-radius: 10px;
		margin: 0 auto;
	}

	.uni-bg-red {
		background-color: red;
	}

	.uni-bg-green {
		background-color: green;
	}

	.uni-bg-blue {
		background-color: blue;
	}
	.box{
      width: 90%;
      margin: 0 auto;
	}
</style>